<!--
* description: 客户信息详情
* author:shensai
* createdDate:2021-1-26
-->
<template>
  <section class="personaledit">
    <el-dialog
      v-dialogDrag
      :visible.sync="popupsVisible"
      width="70%"
      :append-to-body="true"
      :close-on-click-modal="false"
      @close="closeEdit"
    >
      <dialogHeader
        slot="title"
        :title="titleName"
        :style-type="$store.state.app.dialogType"
      />

      <div class="filter-container filter-title">基本信息</div>
      <div class="filter-container filter-params">
        <el-row ref="vailComponentList1W" :gutter="26">
          <component
            :is="comp.component"
            v-for="comp in tableComponents1.filter((o) => o.isMust === true)"
            :ref="comp.isRequire ? comp.isRequire + comp.compKey : comp.compKey"
            :key="comp.compKey"
            :validrule="comp.validrule"
            :code-field="comp.codeField"
            :text-field="comp.textField"
            :popups-key="comp.compKey"
            :parent-fileds="comp.parentFileds || ''"
            :code="formField[comp.codeField]"
            :disabled="true"
            :is-require="comp.isRequire"
            :span="comp.span || 8"
            :label-name="comp.labelName"
            :lookuptype="comp.lookuptype"
            :options="comp.options"
            :o-fields="comp.oFields"
            @changeCode="getComponentCode"
          />
        </el-row>
      </div>

      <div class="filter-container filter-title">联系信息</div>
      <div class="filter-container filter-params">
        <el-row ref="vailComponentList2" :gutter="26">
          <component
            :is="comp.component"
            v-for="comp in tableComponents2.filter((o) => o.isMust === true)"
            :ref="comp.isRequire ? comp.isRequire + comp.compKey : comp.compKey"
            :key="comp.compKey"
            :validrule="comp.validrule"
            :code-field="comp.codeField"
            :text-field="comp.textField"
            :popups-key="comp.compKey"
            :parent-fileds="comp.parentFileds || ''"
            :code="formField[comp.codeField]"
            :disabled="true"
            :is-require="comp.isRequire"
            :span="comp.span || 8"
            :label-name="comp.labelName"
            :lookuptype="comp.lookuptype"
            :options="comp.options"
            :o-fields="comp.oFields"
            @changeCode="getComponentCode"
          />
        </el-row>
      </div>

      <div class="filter-container filter-title">客户特征</div>
      <div class="filter-container filter-params">
        <el-row ref="vailComponentList3" :gutter="26">
          <component
            :is="comp.component"
            v-for="comp in tableComponents3.filter((o) => o.isMust === true)"
            :ref="comp.isRequire ? comp.isRequire + comp.compKey : comp.compKey"
            :key="comp.compKey"
            :validrule="comp.validrule"
            :code-field="comp.codeField"
            :text-field="comp.textField"
            :popups-key="comp.compKey"
            :parent-fileds="comp.parentFileds || ''"
            :code="formField[comp.codeField]"
            :disabled="true"
            :is-require="comp.isRequire"
            :span="comp.span || 8"
            :label-name="comp.labelName"
            :lookuptype="comp.lookuptype"
            :options="comp.options"
            :o-fields="comp.oFields"
            @changeCode="getComponentCode"
          />
        </el-row>
      </div>
      <div class="filter-container filter-title">客户标签</div>
      <div class="filter-container filter-params">
        <el-form label-position="right">
          <el-row>
            <el-col>
              <el-form-item label="客户标签">
                <div style="text-align: left">
                  <el-tag
                    v-for="item in dynamicTags"
                    :key="item"
                    type="success"
                    :disable-transitions="false"
                  >{{ item.label }}
                  </el-tag>
                  <!-- <el-button
                    type="primary"
                    @click="triggerTagWindows"
                  >添加标签</el-button> -->
                </div>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </el-dialog>
    <customer
      :key="editPopupsKey"
      :edit-popups-visible.sync="editPopupsVisible"
      :user-select-tag-array.sync="dynamicTags"
      :data-for-form="editRowData"
      :popups-state="editPopupsState"
      :title-name="titleName"
      @close="closeCust"
    />
  </section>
</template>

<script>
import { oneTableWithViewTemplateMixins } from "@/components/mixins/oneTableWithViewTemplateMixins";
import { formMixins } from "@/components/mixins/formMixins";
import OneTableTemplate from "@/components/templates/oneTable";
import api from "@/api/subsidyManage";
import customer from "./customer.vue";
import { vehiclePdiPriceInquirys } from "@/api/se/vehiclePdiPriceInquiry";
export default {
  components: {
    OneTableTemplate,
    customer,
    dialogHeader: () => import('@/components/dialogHeader')
  },

  // 组件混入对象
  mixins: [oneTableWithViewTemplateMixins, formMixins],
  props: {
    dynamicEditRowData: {
      type: Object,
      default: function() {
        return {}
      }
    },
    popupsVisible: { type: Boolean, default: false }
  },

  data() {
    const viewPageCode = 'areaAudit-edit'

    return {
      editRowData: {},
      editPopupsVisible: false,
      dynamicTags: [],

      inputValue: '',
      inputVisible: false,

      titleName: '客户信息详情',
      apiConfig: api.queryLog,
      // 动态组件-查询条件
      tableComponents: [],
      tableComponents1:
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path] &&
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path]
          .tableComponents &&
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path]
          .tableComponents.length > 0
          ? this.$ConfigCache.CacheConfig.cacheData[this.$route.path]
            .tableComponents
          : [
            {
              compKey: 'compKey1',
              labelName: '用户编号：',
              codeField: 'custNo',
              component: () => import('@/components/org/commonInput'),
              type: 'inputText',
              isMust: true
            },
            {
              compKey: 'compKey2',
              labelName: '客户名称：',
              codeField: 'custName',
              component: () => import('@/components/org/commonInput'),
              type: 'inputText',
              isMust: true
            },
            {
              compKey: 'compKey3',
              labelName: '性别：',
              codeField: 'genderName',
              component: () => import('@/components/org/commonInput'),
              type: 'inputText',
              isMust: true
            },
            {
              compKey: 'compKey4',
              labelName: '省份：',
              codeField: 'addrProvinceName',
              component: () => import('@/components/org/commonInput'),
              type: 'inputText',
              isMust: true
            },
            {
              compKey: 'compKey5',
              labelName: '城市：',
              codeField: 'addrCityName',
              component: () => import('@/components/org/commonInput'),
              type: 'inputText',
              isMust: true
            },
            {
              compKey: 'compKey6',
              labelName: '区县：',
              codeField: 'addrCountyName',
              component: () => import('@/components/org/commonInput'),
              type: 'inputText',
              isMust: true
            },
            {
              compKey: 'compKey7',
              labelName: '详细地址：',
              codeField: 'addrStreet',
              component: () => import('@/components/org/commonInput'),
              type: 'inputText',
              span: 16,
              isMust: true
            },
            {
              compKey: 'compKey8',
              labelName: '出生日期：',
              codeField: 'birthDate',
              component: () => import('@/components/org/commonInput'),
              type: 'dropdownList',

              isMust: true
            },
            {
              compKey: 'compKey9',
              labelName: '证件类型：',
              codeField: 'credTypeName',
              component: () => import('@/components/org/commonInput'),
              type: 'dropdownList',
              isMust: true
            },
            {
              compKey: 'compKey11',
              labelName: '证件号码：',
              codeField: 'credNo',
              component: () => import('@/components/org/commonInput'),
              type: 'dropdownList',
              isMust: true
            },
            {
              compKey: 'compKey12',
              labelName: '民族：',
              codeField: 'nationName',
              component: () => import('@/components/org/commonInput'),
              type: 'dropdownList',
              isMust: true
            },
            {
              compKey: 'compKey13',
              labelName: '建档日期：',
              codeField: 'createdDate',
              component: () => import('@/components/org/commonInput'),
              type: 'dropdownList',
              isMust: true
            }
          ],

      // 动态组件-查询条件
      tableComponents2:
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path] &&
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path]
          .tableComponents &&
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path]
          .tableComponents.length > 0
          ? this.$ConfigCache.CacheConfig.cacheData[this.$route.path]
            .tableComponents
          : [
              {
                compKey: "compKey6",
                labelName: "常用电话：",
                codeField: "phone",
                component: () => import("@/components/org/commonInput"),
                type: "inputText",
                isMust: true,
              },
              {
                compKey: "compKey7",
                labelName: "家庭电话：",
                codeField: "homeTel",
                component: () => import("@/components/org/commonInput"),
                type: "datePicker",
                isMust: true,
              },
              {
                compKey: "compKey8",
                labelName: "办公电话：",
                codeField: "officeTel",
                component: () => import("@/components/org/commonInput"),
                type: "inputText",
                isMust: true,
              },
              {
                compKey: "compKey9",
                labelName: "QQ：",
                codeField: "qqContact",
                component: () => import("@/components/org/commonInput"),
                type: "inputText",
                isMust: true,
              },
              {
                compKey: "compKey10",
                labelName: "微信：",
                codeField: "webchatContact",
                component: () => import("@/components/org/commonInput"),
                type: "inputText",
                isMust: true,
              },
              {
                compKey: "compKey10",
                labelName: "EMAIL：",
                codeField: "emailContact",
                component: () => import("@/components/org/commonInput"),
                type: "inputText",
                isMust: true,
              },
              {
                compKey: "compKey10",
                labelName: "联系时间段：",
                codeField: "convTimeName",
                component: () => import("@/components/org/commonInput"),
                type: "inputText",
                isMust: true,
              },
            ],
      // 动态组件-查询条件
      tableComponents3:
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path] &&
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path]
          .tableComponents &&
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path]
          .tableComponents.length > 0
          ? this.$ConfigCache.CacheConfig.cacheData[this.$route.path]
            .tableComponents
          : [
              {
                compKey: "compKey6",
                labelName: "收入：",
                codeField: "incomeName",
                component: () => import("@/components/org/commonInput"),
                type: "inputText",
                isMust: true,
              },
              {
                compKey: "compKey7",
                labelName: "职务：",
                codeField: "invoiceDate",
                component: () => import("@/components/org/commonInput"),
                type: "datePicker",
                isMust: true,
              },
              {
                compKey: "compKey8",
                labelName: "学历：",
                codeField: "educationName",
                component: () => import("@/components/org/commonInput"),
                type: "inputText",
                isMust: true,
              },
              {
                compKey: "compKey9",
                labelName: "婚姻状况：",
                codeField: "isMarryName",
                component: () => import("@/components/org/commonInput"),
                type: "inputText",
                isMust: true,
              },
            ],
      // 动态组件-查询条件
      tableComponents4:
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path] &&
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path]
          .tableComponents &&
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path]
          .tableComponents.length > 0
          ? this.$ConfigCache.CacheConfig.cacheData[this.$route.path]
            .tableComponents
          : [],
      // 表单数据（无需赋值，由混入对象赋值）
      formField: this.$utils.getFormField(
        this,
        {
          addrCityName: '',
          addrProvinceName: '',
          addrStreet: '',
          convTimeCode: '',
          createdDate: '',
          credNo: '',
          credTypeName: '',
          custName: '',
          educationName: '',
          emailContact: '',
          genderCode: '',
          homeTel: '',
          incomeName: '',
          isMarryName: '',
          nationCode: '',
          officeTel: '',
          custNo: '',
          phone: '',
          post: '',
          qqContact: '',
          webchatContact: ''
        },
        this.$ConfigCache.CacheConfig.cacheData[viewPageCode]
      )
    }
  },

  // 监听标签值
  watch: {
    // 标签
    dynamicTags(value) {
      const val = value.join(',')
      var parent = this.$utils.getHasFormFieldParentComponent(this)
      parent.formField[this.codeField] = val
      this.$emit('changeCode', value)
    },
    getVal(xzz) {
      const val = [];
      this.dynamicTags = xzz.split(",");
    },
    curPopupsVisible: {
      handler: function(val) {
        if (val) {
          const queryObj = {
            // 保存mutation
            type: 'mutation',
            // api配置
            apiConfig: vehiclePdiPriceInquirys.queryPersonalCustomerDetails,
            // 条件/实体参数（变量），根据typeParam中的定义配置
            variables: { dlrCustNo: this.dynamicEditRowData.dlrCustNo }
          }
          // 转换了中台请求格式数据
          var paramD = this.$getParams(queryObj)
          // 调用中台API方法（可复用）
          this.$requestAPI(paramD).then((response) => {
            if (response.result == "1") {
              this.formField = response.rows[0].mapListResult[0];
              console.log(this.editRowData);
            }
          })
        }
      }
    }
  },
  created() {
    this.tableComponents = [...this.tableComponents1, ...this.tableComponents2, ...this.tableComponents3]
  },

  methods: {
    // 关闭弹窗
    closeEdit() {
      this.$emit('update:popupsVisible', false)
      this.personalPopupsKey = this.$utils.generateId()
    },
    closeCust() {},
    /**
     * @description 打开客户标签窗口
     * @author zhu.zou
     */
    triggerTagWindows() {
      this.editPopupsVisible = true
    },

    // 点击选择标签
    handleClose(tag) {
      // this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
    },
    handleInputConfirm() {
      const inputValue = this.inputValue
      if (inputValue) {
        // this.dynamicTags.push(inputValue);
      }
      this.inputVisible = false
      this.inputValue = ''
    }
  }
}
</script>

<style lang="scss" scoped>
.filter-title {
  font-size: 18px;
  font-weight: bolder;
}
.filter-container.filter-title::before {
  border-left: 4px solid #0075ff;
  padding-right: 10px;
  height: 20px;
  left: 0px;
  top: 4px;
}
.prompt {
  color: #e70020;
  font-size: 13px;
  height: 15px;
  line-height: 15px;
}
/deep/.el-dialog__body {
  height: 500px;
}
/deep/.filter-params .el-col {
  margin-bottom: 15px;
}
.button-new-tag {
  width: 68px;
  height: 30px;
}
.tags-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  padding: 0 30px;
  margin: 5px 0 10px 0;
}
.el-tag--small {
  margin: 0 10px 5px 10px;
}
/deep/.el-input__inner {
  padding-left: 3px;
  padding-right: 3px;
}
</style>
